<template>
  <div>
    <h2>app</h2>
    <my-dialog>
      <!-- 在两个标签之间写的代码，就是传递给插槽的结构 -->
      <!-- v-slot:title  ===>  #title -->
      <!-- <h3 slot="title">老版本的写法</h3> -->
      <template #title>
      <h3>添加图书</h3>
      </template>
      <template #content='{uname,age}'>
      <form action="">
        书名：<input type="text" :value="uname"><br>
        作者：<input type="text" :value="age"><br>
      </form>
      </template>
      <template #default>
        <button>确认添加</button>
        <button>取消</button>
      </template>
    </my-dialog>

    <!-- <my-dialog>
      <h3>提示</h3>
      <p>你确认要删除吗？</p>
      <button>确定</button>
      <button>取消</button>
    </my-dialog> -->
  <my-list :list="users">
    <template #default="{id}">
      <button @click="del(id)">删除</button>
    </template>
  </my-list><hr>
  <my-list :list="goods">
    <template #default>
      <button>删除</button>
      <button>查看详情</button>
    </template>
  </my-list>
  </div>
</template>

<script>
import MyDialog from './components/MyDialog.vue'
import MyList from './components/MyList.vue'
export default {
  components: { MyDialog, MyList },
  data() {
    return {
      users: [
        { id: 2, name: '张三' },
        { id: 4, name: '李四' },
        { id: 5, name: '王五' },
        { id: 6, name: '赵六' }
      ],
      goods: [
        { id: 4, name: '方便面' },
        { id: 6, name: '火腿肠' },
        { id: 7, name: '鸡爪子' }
      ]
    }
  },
  methods: {
    del(id) {
      this.users = this.users.filter(item => item.id !== id)
    }
  }
}
</script>

<style>

</style>